<template>
  <div style="width:100%;height:100%">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>停车位</el-breadcrumb-item>
      <el-breadcrumb-item>车位管理</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="bigBox">
      <div style="margin-top:20px;height:100%" >
        <el-tabs :tab-position="tabPosition" style="height: 100%">
          <el-tab-pane label="车位展示" style="height:600px;">
            <span slot="label">
              <i class="el-icon-date"></i>
              车位展示  
            </span>
            <el-row :gutter="50" >
                <el-col :span="4" style="background:skyblue;height:300px" class="park">
                <el-tag  effect="dark" size="medium" class="parkInfo">车位信息</el-tag>
                <div v-if="parkInfos.status == 1">
                  <div class="box"><b>车位号：</b>{{parkInfos.pid}}</div>
                  <div class="box"><b>车牌号：</b>{{parkInfos.vehicle}}</div>
                  <div class="box"><b>用户名：</b>{{parkInfos.uid}}</div>
                  <div class="box"><b>车位状态：</b>{{parkInfos.status}}</div> 
                  <div class="box"><b>停车时间：</b>{{parkInfos.starttime}}</div> 
                </div>
              </el-col>
              <el-col :span="20" >
                <div
                  class="grid-content bg-purple-light smallbox"
                  v-for="(item,index) in parks "
                  :key="index"
                  :style="getStyle(item,index)"
                  @click="parkInfo(item,index)">
                  <div class="parkBox">车位id:{{parks[index].pid}}</div> 
                  <div class="parkBox">车位状态：{{parks[index].status}}</div>
                  <div class="parkBox" v-if="parks[index].status == 1">车牌号码：{{parks[index].vehicle}}</div>
                </div>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
        tabPosition: "top",
        parksList: {
            pid: 0, //车位id
            vehicle: "", //车牌号码
            uid: 0, //用户id
            status: 0, //车位状态（1有车，0无车）
            date1: '',  //停车日
            date2: '',   //停车具体时间
            delivery: false,
        },
        parks: [],
        parkInfos:[],
        activeNames:['1']
    };
  },
  created(){
      this.getdata()
  },
  methods: {
    getStyle(item,index){
      if(item.status === 1){
        return {'background-color':'red'}
      }else{
        return {'background-color':'greenyellow'}
      }
    },
    getdata(){
      this.$http({
          url:'/parking/getAll',
          method:'get',
          params:this.parksList
      }).then(res=>{
          console.log(res)
          this.parks = res.data
      });
    },
    parkInfo(item, index) {
      // console.log(item);
      this.$http({
          url:'/parking/getOne',
          params:{
              pid:item.pid
          }
      }).then(res=>{
        this.parkInfos = res.data
      })
    },
    onSubmit() {
        console.log('submit!');
        this.$http({
            url:'/parking/add',
            method:'post',
            params: this.parksList
        }).then(res=>{
            this.$message({
              message: res.msg,
              type: res.code = 200 ? "success" : "error",
            })
        }).catch({})
    },
    cancel(){
      this.$router.back();
    }
  },
};
</script>

<style scoped>

.smallbox{
   float: left;
   margin-right: 50px;
   margin-bottom: 50px;
   cursor: pointer;
}
.bigBox .smallbox  {
  width:100px;
  height:150px;
  margin-right: 30px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  text-align: center;
  border-radius: 10px;
  border: 1px dashed black;
}
.parkInfo{
    width: 100px;
    height: 35px;
    font-size: 15px;
    text-align: center;
    padding-top: 5px;
    color:black;
}
.parkBox{
  width: 100%;
  margin: auto;
  border-radius: 5px;
}
.text{
  width: 100%;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
}
.box{
  width: 100%;
  font-size: 15px;
  text-indent: 5px;
  color: black;
  margin-bottom: 10px;
}
.park{
  margin-top: 10px;
}
.park .box:nth-child(1){
  margin-top: 30px;
}
</style>